<template>
  <div class="page subscribeList">
    <van-nav-bar left-arrow @click-left="onClickBack" class="my-nav-bar" title="预约列表" />
    <div class="tabs">
      <div class="tabs-item" v-for="(item) in tabs" :key="item.id" @click="handleActice(item.id)">
        <span :style="{ color: active === item.id ? '#2C70F4' : '' }">{{ item.name }}</span>
        <div class="line" v-show="active === item.id"></div>
      </div>
    </div>
    <itemList Type="1" :show="active === '1'"/>
    <itemList Type="2" :show="active === '2'"/>
    <itemList Type="3" :show="active === '3'"/>
  </div>
</template>
<script>
import itemList from "./itemList.vue"
export default {
  name: "subscribeList",
  components: { itemList },
  data() {
    return {
      active: "1",
      tabs: [
        {
          name: "待处理",
          id: "1",
        },
        {
          name: "已处理",
          id: "2",
        },
        {
          name: "已发起",
          id: "3",
        },
      ],
      subscribeList: [],
      subscribeList1: [
        {
          room: '4楼4号会议室',
          id: 1,
          stutusName: '待审核',
          stutus: 0,
          promoter: "周婷人",
          meetingTheme: '会议主题',
          meetingTime: '2025-04-29 14:00-17:00',
          isRead: false,
        },
        {
          room: '4楼4号会议室',
          id: 1,
          stutusName: '待审核',
          stutus: 0,
          promoter: "周婷人",
          meetingTheme: '会议主题',
          meetingTime: '2025-04-29 14:00-17:00',
          isRead: true,
        },
        {
          room: '4楼4号会议室',
          id: 1,
          stutusName: '待审核',
          stutus: 0,
          promoter: "周婷人",
          meetingTheme: '会议主题',
          meetingTime: '2025-04-29 14:00-17:00',
          isRead: false,
        },
      ],
      subscribeList2: [
        {
          room: '4楼4号会议室',
          id: 1,
          stutusName: '审核通过',
          stutus: 1,
          promoter: "周婷人",
          meetingTheme: '会议主题',
          meetingTime: '2025-04-29 14:00-17:00',
          isRead: false,
        },
        {
          room: '4楼4号会议室',
          id: 1,
          stutusName: '审核通过',
          stutus: 1,
          promoter: "周婷人",
          meetingTheme: '会议主题',
          meetingTime: '2025-04-29 14:00-17:00',
          isRead: true,
        },
        {
          room: '4楼4号会议室',
          id: 1,
          stutusName: '审核通过',
          stutus: 1,
          promoter: "周婷人",
          meetingTheme: '会议主题',
          meetingTime: '2025-04-29 14:00-17:00',
          isRead: false,
        },
      ],
    }
  },
  mounted() {
    console.log(this.$route.params, "$route.params");
    if (this.$route.params.active === "3") {
      this.active = "3";
    }
  },

  methods: {
   
    onClickBack() {
      this.$router.push('/');
    },
    handleActice(id) {
      this.active = id;
    }
  }
}
</script>
<style scoped lang="less">
.page {
  background: linear-gradient(to top, #F7FAFF, #B8D3FA, #DCE9FD);

  

  .tabs {
    display: flex;
    justify-content: space-between;
    margin: 0 20px;

    .tabs-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: center;
      flex-direction: column;
      gap: 5px;

      >span {
        font-size: 16px;
        color: #727B9C;
      }

      >.line {
        width: 15px;
        height: 5px;
        border-radius: 20px;
        background-color: #2C70F4;
      }
    }
  }
}
</style>